<template>
	<view>
		<!-- type 1  单选 -->
		<!-- type 2  多选 -->
		<text class="title">{{testList[i].type==1?"单选":"多选"}}</text>--{{testList[i].finished}}--{{answer}}
		{{testList[i].topic}}
		<image v-if="testList[i].topicurl" :src="imgUrl+testList[i].topicurl" mode=""></image>

		<!-- num 1字母  2 正确  3 错误 -->
		<view class="list" @click="testdone(item.topicid,index)" v-for="(item,index) in testList[i].topics"
			:key="item.id">
			<text class="circle" v-if="item.num==1">{{item.type}}</text>
			<text class="circle green" v-if="item.num==2">√️</text>
			<text class="circle error" v-if="item.num==3">×</text>

			{{item.topic}}
		</view>
		<view>{{showAnswer}}</view>

		<text @click="collection">收藏</text>
            
			<button type="primary" v-if="testList[i].type==2" @click="yesChoose">提交</button>
  
		<view class="btngroup">
			<button type="primary" @click="prepage" size="mini">上一页</button>

			{{i+1}}/ {{testList.length}}
			<button type="primary" size="mini" @click="nextpage">下一页</button>
		</view>
	</view>
</template>

<script>
	import {
		ajaxFun,
		imgUrl
	} from "@/untils/ajax.js";
	import {
		mapState
	} from "pinia"; //辅助函数
	import {
		useUserStore
	} from "@/stores/user.js" //用户相关的模块
	import formItem from "../../uni_modules/uview-plus/libs/config/props/formItem";

	export default {
		onLoad(options) {
			console.log(options);

			uni.setNavigationBarTitle({
				title: options.title
			})
			this.car = options.cart;
			this.getData()

		},
		computed: {
			...mapState(useUserStore, ["location", "userInfo"]),
			showAnswer() {
				let blo=this.testList[this.i].topics.some(item=>item.num==3);
				if(blo&&this.testList[this.i].type==1){// 单选****
					let answer="";
					
					switch (this.testList[this.i].answer){
						case "1":
						   answer="A"
							break;
						case "2":
						   answer="B"
							break;
						case "3":
						   answer="C"
							break;
						default:
						  answer="D"
							break;
					}
					
				 return "正确答案"+answer
				}else if(blo&&this.testList[this.i].type==2){
					let arry=this.testList[this.i].answer.split(",");
					let arry2=[];
					
					arry.map(item=>{
						 if(item==1){
							 arry2.push("A")
						 }else if(item==2){
							 arry2.push("B")
						 }else if(item==3){
							 arry2.push("C")
						 }else{
							 arry2.push("D")
						 }
					})
					
					return "多选答案"+arry2.join(",")
				}else{
					return ""
				}
			}
		},
		data() {
			return {
				car: 0,
				testList: [],
				i: 1, // 下标
				imgUrl,
				show: false,
				answer: ""
			}
		},
		methods: {
			getData() {
				// let result=await ajaxFun("/test/gotest","post",{
				// 	lat:this.location.latitude,
				// 	lon:this.location.longitude,
				// 	userid:this.userInfo.userid,
				// 	car:this.car,
				// 	page:1,
				// 	limit:2000
				// });
				// result.data.map(item=>{
				// 	item.finished=false//所有题 都没做
				// })

				let result = {
					"data": [{
						"id": 6,
						"topic": "如图所示，驾驶机动车遇到这种情况，以下做法正确的是什么？",
						"topicurl": "\/topic\/image\/20220226\/c7b9c4cf104182c8e1136761aa00fa6b.jpg",
						"type": 1,
						"answer": "2",
						"practice": 2,
						"question": 5,
						"subjects": 1,
						"trial": 0,
						"car": 1,
						"sift": 0,
						"ti1": "",
						"ti2": "",
						"coll": "1",
						"done": "1",
						"topics": [{
							"id": 12,
							"topic": "停车观察",
							"topicid": 6,
							"type": "A"
						}, {
							"id": 13,
							"topic": "减速慢行、鸣喇叭示意",
							"topicid": 6,
							"type": "B"
						}, {
							"id": 14,
							"topic": "为拓宽视野，临时占用左侧车道行驶",
							"topicid": 6,
							"type": "C"
						}, {
							"id": 15,
							"topic": "加速行驶",
							"topicid": 6,
							"type": "D"
						}],
						"topickill": []
					}, {
						"id": 83,
						"topic": "石某驾驶低速载货机动车，运载4.05吨货物（核载1.2吨），行驶至宁津县境内314省道51公里加260米处，在越过道路中心线超越前方同向行驶的机动车时，与对向正常行驶的中型客车（乘载12人，核载11人）正面相撞，造成10人死亡、2人受伤。此事故中的违法行为是什么？",
						"topicurl": "",
						"type": 2,
						"answer": "1,2,3",
						"practice": 1,
						"question": 5,
						"subjects": 4,
						"trial": 0,
						"car": 1,
						"sift": 1,
						"ti1": "",
						"ti2": "",
						"coll": "1",
						"done": "1",
						"topics": [{
							"id": 296,
							"topic": "货车超载",
							"topicid": 83,
							"type": "A"
						}, {
							"id": 297,
							"topic": "货车违法超车",
							"topicid": 83,
							"type": "B"
						}, {
							"id": 298,
							"topic": "客车超员",
							"topicid": 83,
							"type": "C"
						}, {
							"id": 299,
							"topic": "客车驾驶人疲劳驾驶",
							"topicid": 83,
							"type": "D"
						}],
						"topickill": []
					}, {
						"id": 84,
						"topic": "夜间驾驶机动车通过坡道时，怎样使用灯光？",
						"topicurl": "",
						"type": 2,
						"answer": "2,4",
						"practice": 1,
						"question": 5,
						"subjects": 1,
						"trial": 0,
						"car": 1,
						"sift": 1,
						"ti1": "",
						"ti2": "",
						"coll": "1",
						"done": "1",
						"topics": [{
							"id": 300,
							"topic": "开启车上所有灯光",
							"topicid": 84,
							"type": "A"
						}, {
							"id": 301,
							"topic": "上坡路段时交替使用远近光灯",
							"topicid": 84,
							"type": "B"
						}, {
							"id": 302,
							"topic": "驶近坡顶时使用远光灯",
							"topicid": 84,
							"type": "C"
						}, {
							"id": 303,
							"topic": "下坡行驶时使用远光灯",
							"topicid": 84,
							"type": "D"
						}],
						"topickill": []
					}],
					"comil": "0",
					"sum": 3,
					"code": "200"
				}

				result.data.map(item => {
					item.finished = false;
					item.topics.map(item2 => {
						item2.num = 1; //显示处理字母 ABCD
					})
				})


				this.testList = result.data; //不要赋值 先处理（每一项里面加一个开关）
				console.log(this.testList)
			},
			prepage() { //上一页
				if (this.i == 0) {
					uni.showToast({
						title: "已经是第一页了",
						icon: "none"
					})
					return false
				}
				this.i--;

			},
			nextpage() {
				if (this.i == this.testList.length - 1) {
					uni.showToast({
						title: "已经是最后一页了",
						icon: "none"
					})
					return false
				}

				this.i++;
					
				

			},
			async collection() {
				let result = await ajaxFun("/index/collection", "post", {
					userid: this.userInfo.userid,
					Topicid: this.testList[this.i].id
				})
				uni.showToast({
					title: result.msg,
					icon: "none"
				})
			},
			async testdone(id, index) {// 做题接口
				if (this.testList[this.i].finished) { //如果你的题目做过了 停止
				uni.showToast({
					title:"该题已经做过了",
					icon:"none"
				})
					return false;
				}
				if (this.testList[this.i].type == 1) { //单选题处理****************************

					let result = await ajaxFun("/test/done", "get", {
						userid: this.userInfo.userid,
						topicid: id,
						answer: index + 1,
					})
					uni.showToast({
						icon: "none",
						title: result.msg
					})
					this.testList[this.i].finished = true
					if (result.code == 200) { //正确  num  2
						this.testList[this.i].topics[index].num = 2;
						this.nextpage()

					} else { // 错误  num 3
						this.testList[this.i].topics[index].num = 3;

					}
				} 
				else { //多选************************************
                    this.testList[this.i].topics[index].num==2? this.testList[this.i].topics[index].num=1: this.testList[this.i].topics[index].num=2
				}
			},
		   async	yesChoose(){ // 
				let arry=[];
				this.testList[this.i].topics.map((item,index)=>{
					  if(item.num==2){
						  arry.push(index+1)
					  }
				})
				console.log();
				let result=await ajaxFun("/test/done","get",{
					userid:this.userInfo.userid,
					topicid:this.testList[this.i].id,
					answer:arry.join(",")
				})
				this.testList[this.i].finished=true;//已经被做过了
				if(result.code=="503"){//错误
					this.testList[this.i].topics.map((item,index)=>{
						  if(item.num==2){
							  item.num=3
						  }
					})
				}else if(result.code=="200"){//正确
					this.nextpage();
				
				
				}
				
			}

		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #f1f1f1;
	}

	.title {
		background: blue;
		display: inline-block;
		color: white;
		padding: 8rpx;
		border-radius: 20rpx;
		margin: 20rpx;
	}

	.btngroup {
		display: flex;
		padding: 20rpx;
		justify-content: space-between;

		button {
			margin: 0 !important;
		}
	}

	.list {
		padding: 20rpx;

		.circle {
			display: inline-block;
			width: 40rpx;
			height: 40rpx;
			line-height: 40rpx;
			background: white;
			border-radius: 50%;
			text-align: center;
			box-shadow: 10rpx 10rpx 10rpx #dedede;
		}

		.green {
			background: green;
			color: white !important;
		}

		.error {
			background: red;
			color: white !important;
		}
	}
</style>